<template>
  <div class="mytable01">
    <CompHVxeTable :tableFields="tableFields01" :tableData="tableData02" :seqWidth="tableConfig01.seqWidth" :seqTitle="tableConfig01.seqTitle" :seqNoPre="tableConfig01.seqNoPre" :seqNoStart="tableConfig01.seqNoStart" :seqNoPadLength="tableConfig01.seqNoPadLength" :tableHeight="tableConfig01.tableHeight" :rowHeight="tableConfig01.rowHeight" :headerHeight="tableConfig01.headerHeight" :tableScroll="tableConfig01.tableScroll" :tableStripe="tableConfig01.tableStripe" :intarvalTime="tableConfig01.intarvalTime" :intervalFrames="tableConfig01.intervalFrames"></CompHVxeTable>
  </div>
  <div class="mytable02">
    <CompHVxeTable :tableFields="tableFields02" :tableData="tableData" :seqWidth="tableConfig02.seqWidth" :seqTitle="tableConfig02.seqTitle" :seqNoPre="tableConfig02.seqNoPre" :seqNoStart="tableConfig02.seqNoStart" :seqNoPadLength="tableConfig02.seqNoPadLength" :tableHeight="tableConfig02.tableHeight" :rowHeight="tableConfig02.rowHeight" :headerHeight="tableConfig02.headerHeight" :tableScroll="tableConfig02.tableScroll" :tableStripe="tableConfig02.tableStripe" :intarvalTime="tableConfig02.intarvalTime" :intervalFrames="tableConfig02.intervalFrames"></CompHVxeTable>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CompHVxeTable from '@/components/CompHVxeTable.vue'
// let tableScroll = ref(true)
// let tableHeight = ref(300)
// let headerHeight = ref(60)
// let rowHeight = ref(50)
// let seqTitle = ref('SeqNo')
// let seqNoPre = ref('Sd')
// let intarvalTime = ref(1000)
// let intervalFrames =ref(25)
const tableConfig01 = ref({
  tableScroll:false,
  tableStripe:false,
  tableHeight:300,
  headerHeight:60,
  rowHeight:50,
  seqWidth:100,
  seqTitle:'果品序号',
  seqNoPre:'Fruit',
  seqNoStart:1,
  seqNoPadLength:5,
  intarvalTime:1000,
  intervalFrames:25
})
const tableFields01 = ref([
  {field:'name',title:'产品名'},
  {field:'price',title:'价格'},
  {field:'origin',title:'原产地'},
])
const tableConfig02 = ref({
  tableScroll:true,
  tableStripe:true,
  tableHeight:300,
  headerHeight:50,
  rowHeight:30,
  seqWidth:150,
  seqTitle:'序号',
  seqNoPre:'济南370103',
  seqNoStart:1001,
  seqNoPadLength:4,
  intarvalTime:1000,
  intervalFrames:1
})
const tableFields02 = ref([
  {field:'name',title:'姓名'},
  {field:'sex',title:'性别'},
  {field:'role',title:'职务'},
  {field:'age',title:'年龄'},
  {field:'address',title:'地址'},
])
const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
  { id: 10005, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10006, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10007, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10008, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
  { id: 10009, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10010, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10011, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10012, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
const tableData02 = ref([
  { id: 10001, name: '红富士苹果', price: 2.5, origin: '烟台' },
  { id: 10002, name: '蛇果', price: 5.5, origin: '美国' },
  { id: 10003, name: '阳光玫瑰葡萄', price: 10, origin: '新疆' },
  { id: 10004, name: '新西兰猕猴桃', price: 10, origin: '新西兰' },
  { id: 10005, name: '红富士苹果2', price: 2.5, origin: '烟台' },
  { id: 10006, name: '蛇果2', price: 5.5, origin: '美国' },
  { id: 10007, name: '阳光玫瑰葡萄2', price: 10, origin: '新疆' },
  { id: 10008, name: '新西兰猕猴桃2', price: 10, origin: '新西兰' },
  { id: 10009, name: '红富士苹果3', price: 2.5, origin: '烟台' },
  { id: 10010, name: '蛇果3', price: 5.5, origin: '美国' },
  { id: 10011, name: '阳光玫瑰葡萄3', price: 10, origin: '新疆' },
  { id: 10012, name: '新西兰猕猴桃3', price: 10, origin: '新西兰' },
])
</script>
<style lang="scss" scoped>
.mytable01 {
  width: 400px;
  height: 300px;
  overflow: auto;
}
.mytable02 {
  width: 600px;
  height: 300px;
  overflow: auto;
}
</style>